<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>旋转木马 幻灯片开发</title>
  <link type="text/css" rel="stylesheet" href="carousel.css">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="carousel.js"></script>
</head>
<body style="padding:50px;">

<div class="J_Poster poster-main" data-setting='{
        "width":1000,
        "height":270,
        "posterWidth":640,
        "posterHeight":270,
        "scale":0.8,
        "autoPlay":true,
        "delay":2000,
        "speed":300

	}'>
  <div class="poster-btn poster-prev-btn"></div>
  <ul class="poster-list">
    <li class="poster-item"><a href="#"><img src="1.jpg" width="100%" height="100%"></a></li>
    <li class="poster-item"><a href="#"><img src="2.jpg" width="100%" height="100%"></a></li>
    <li class="poster-item"><a href="#"><img src="3.jpg" width="100%" height="100%"></a></li>
    <li class="poster-item"><a href="#"><img src="4.jpg" width="100%" height="100%"></a></li>
    <li class="poster-item"><a href="#"><img src="5.jpg" width="100%" height="100%"></a></li>
    <li class="poster-item"><a href="#"><img src="2.jpg" width="100%" height="100%"></a></li>
    <li class="poster-item"><a href="#"><img src="3.jpg" width="100%" height="100%"></a></li>
    <li class="poster-item"><a href="#"><img src="4.jpg" width="100%" height="100%"></a></li>
    <li class="poster-item"><a href="#"><img src="5.jpg" width="100%" height="100%"></a></li>
  </ul>
  <div class="poster-btn poster-next-btn"></div>
</div>
<p style="height:50px;"></p>
<div class="J_Poster poster-main" data-setting='{
                                                                                    "width":800,
                                                                                    "height":270,
                                                                                    "posterWidth":640,
                                                                                    "posterHeight":270,
                                                                                    "scale":0.8,
                                                                                    "autoPlay":true,
                                                                                    "delay":5000,
                                                                                    "speed":300,
                                                                                    "vericalAlign":"top"
																					}'>
  <div class="poster-btn poster-prev-btn"></div>
  <ul class="poster-list">
    <li class="poster-item"><a href="#"><img src="1.jpg" width="100%" height="100%"></a></li>
    <li class="poster-item"><a href="#"><img src="2.jpg" width="100%" height="100%"></a></li>
    <li class="poster-item"><a href="#"><img src="3.jpg" width="100%" height="100%"></a></li>
    <li class="poster-item"><a href="#"><img src="4.jpg" width="100%" height="100%"></a></li>
  </ul>
  <div class="poster-btn poster-next-btn"></div>
</div>
<script>

  $(function () {
    Carousel.init($(".J_Poster"));
  });
</script>


</body>
</html>
